<template>
    <Message :avatar="msg.avatar" :is-reply="!!msg.isReply">
        <component :is="resolveContent(msg.msgType)" :msg="msg"></component>
    </Message>
</template>

<script setup lang="ts">
import Message from './Message.vue';
import UnsupportedContentVue from './UnsupportedContent.vue'
import TextContentVue from './TextContent.vue'
import ImageContentVue from './ImageContent.vue'
import VoiceContentVue from './VoiceContent.vue';
import VideoContentVue from './VideoContent.vue';
import * as api from '../api'

const props = defineProps<{
    msg: api.AnyMessage
}>()

const resolveContent = (type: api.MessageType) => {
    return ({
        'text': TextContentVue,
        'image': ImageContentVue,
        'voice': VoiceContentVue,
        'video': VideoContentVue
    } as Record<api.MessageType, any>)[type] ?? UnsupportedContentVue
}

</script>